<template>
  <div style="overflow:hidden">
    <!-- 搜索框 -->
    <!-- 头部 -->
    <div class="header">
      <!-- 搜索框部分 -->
      <div class="search" @click="search">
        <img src="@/assets/imgs/icons/搜索.png" alt="">
        <p>搜索商品</p>
      </div>
      <!-- 定位部分 -->
      <div @click="location">{{data.name}}</div>
    </div>
    <!-- 广告 -->
    <div class="banner">
      <!-- 搜索框 -->

      <!-- 广告轮播图 -->
      <div class="banner-c banxin">
        <van-swipe indicator-color="#FFFFFF">
          <van-swipe-item v-for="image in list.banner" :key="image.id">
            <img v-lazy="image.image_url" class="bannerImg" />
          </van-swipe-item>
        </van-swipe>
      </div>
      
    </div>
    <!-- 分类 -->
    <div class="category">
      <van-grid clickable :column-num="5" :border="false" class="cate-content">
        <van-grid-item to="/home" class="cate-item">
          <img src="@/assets/imgs/icons/家居.png" alt="" class="icon-img">
          <p class="cate-name">家居</p>
        </van-grid-item>
        <van-grid-item to="/home" class="cate-item">
          <img src="@/assets/imgs/icons/餐厨.png" alt="" class="icon-img">
          <p class="cate-name">餐厨</p>
        </van-grid-item>
        <van-grid-item to="/home" class="cate-item">
          <img src="@/assets/imgs/icons/服装.png" alt="" class="icon-img">
          <p class="cate-name">服装</p>
        </van-grid-item>
        <van-grid-item to="/home" class="cate-item">
          <img src="@/assets/imgs/icons/旅行.png" alt="" class="icon-img">
          <p class="cate-name">旅行</p>
        </van-grid-item>
        <van-grid-item to="/home" class="cate-item">
          <img src="@/assets/imgs/icons/兴趣.png" alt="" class="icon-img">
          <p class="cate-name">兴趣</p>
        </van-grid-item>
      </van-grid>
    </div>
    <!-- 身体 -->
    <div class="banxin">
      <!-- 品牌制造商直供 -->
      <h2>
        <router-link :to="{name:'brand'}">
          品牌制造商直供
        </router-link>
      </h2>
      <van-grid clickable :column-num="2" class="band">
        <van-grid-item
          :to="{name:'brandDetail',params:{'id':item.id}}"
          v-for="item in list.brandList"
          :key="item.id"
          class="band-item"
        >
          <img :src="item.new_pic_url" alt="图片未找到" class="band-img" />
          <p class="band-name">{{ item.name }}</p>
          <p class="band-price">{{ item.floor_price }}</p>
        </van-grid-item>
      </van-grid>
    </div>

    <!-- 新品首发 -->
    <div class="newgoods">
      <div class="banxin" @click="gogoods('isNew')">
        <img
          src="http://jinglins.gitee.io/bufan-tesco-mall/assets/new-product-pic-ab17c35e.png"
          alt=""
          style="width: 100%"
        />
      </div>
      <div class="new-container">
        <ul class="newlist">
          <li
            v-for="(item, index) in list.newGoods"
            :key="index"
            class="newitem"
          >
            <img
              :src="item.list_pic_url"
              alt=""
            />

            <p class="new-name name">{{item.name}}</p>
            <p class="new-brief brief">{{item.goods_brief}}</p>
            <p class="new-price price">￥:{{item.retail_price}}</p>
          </li>
        </ul>
      </div>
    </div>
    <!-- 人气推荐 -->
    <div class="hotgoods">
      <div class="banxin" @click="gogoods('isHot')">
        <img
          src="http://jinglins.gitee.io/bufan-tesco-mall/assets/hot-recom-pic-743969c3.png"
          alt=""
          style="width: 100%"
        />
      </div>
      <div class="new-container">
        <ul class="newlist">
          <li
            v-for="(item, index) in list.hotGoods"
            :key="index"
            class="newitem"
          >
            <img
              :src="item.list_pic_url"
              alt=""
            />

            <p class="new-name name">{{item.name}}</p>
            <p class="new-brief brief">{{item.goods_brief}}</p>
            <p class="new-price price">￥:{{item.retail_price}}</p>
          </li>
        </ul>
      </div>
    </div>
    <!-- 专题精选 -->
    <div>
      <div>
        <h2>专题精选</h2>
      </div>
      <div class="topic-container">
        <ul class="topiclist">
          <li v-for="item in list.topicList" :key="item.id" class="topicitem">
            <img class="topic-img" :src="item.item_pic_url" alt=""/>
            <p class="topic-title title">
              {{item.title}}
              <span class="topic-price">{{item.price_info}}起</span>
            </p>
            <p class="topic-subtitle subtitle">
              {{item.subtitle}}
            </p>
          </li>
        </ul>
      </div>
    </div>
    <!-- 居家好物 -->
    <div v-for="item in list.newCategoryList" :key="item.id">
      <h2>{{item.name}}好物</h2>
      <van-grid :border="false" :column-num="2">
        <van-grid-item v-for="good in item.goodsList" :key="good.id">
          <van-image :src="good.list_pic_url" />
          <p>{{good.name}}</p>
          <p>{{good.retail_price}}</p>
        </van-grid-item>
        <van-grid-item >
          <p>{{item.name}}好物</p>
          <van-icon name="arrow" />
        </van-grid-item>  
      </van-grid>
    </div>
    
  </div>
</template>

<script>
import { index } from "@/axios/index.js";
import 'vant/lib/icon/local.css'
import { mapGetters } from 'vuex';
export default {
  name: "HomeView",

  data() {
    return {
      list: {},
    };
  },
  computed:{
    ...mapGetters(['data'])
  },
  
  created() {},
  async mounted() {
    this.list = await index();
    // 页面所有内容
    console.log(this.list);

    let _this=this;
    AMap.plugin("AMap.CitySearch", function () {
      var citySearch = new AMap.CitySearch();
      citySearch.getLocalCity(function (status, result) {
        if (status === "complete" && result.info === "OK") {
          // 查询成功，result即为当前所在城市信息
          console.log(result);
          _this.data.city=result.city
        }
      });
    });
  },

  methods: {
    // 点击搜索框事件
    search(){
      // 跳转到搜索窗口
      this.$router.push('/home/search')
    },
    // 点击 去 新品首发
    gogoods(val){
      this.$router.push({name:"goods",params:{'val':val}})
    },
    // 点击 跳转到定位
    location(){
      this.$router.push({name:'location'})
    }
  },
};

</script>

<style scoped lang="scss">
* {
  margin: 0;
  padding: 0;
  list-style:none;
}

// 头部
.header{
  width: 710px;
  margin: 0 auto;
  margin-top: 8px;
  display: flex;
  justify-content: space-between;
  // 搜索框样式
  .search{
    display: flex;
    width: 539px;
    height: 70px;
    background: #F8F8F8;
    border-radius: 35px;
    align-items:center;
    img{
      width: 42px;
      height: 42px;
      margin-left: 30px;
    }
    p{
      font-size: 28px;
      color: #B4B4B4;
      letter-spacing: 0;
      font-weight: 400;
      margin-left: 22px;
    }
  }
}
.banxin {
  width: 710px;
  margin: 20px auto;
  overflow: hidden;
}
.banner .bannerImg {
  width: 710px;
  height: 343px;
}
.cate-content {
  margin: 47px 20px 50px;
}
.band {
  width: 710px;
  height: 402px;
  overflow: hidden;
}
.band-item {
  position: relative;
  width: 350px;
  height: 196px;
}

.band-item .band-img {
  width: 350px;
  height: 196px;
}
.band-item p {
  position: absolute;
}
.band-name{
  left: 23px;
  top: 30px;
  font-size: 30px;
  height: 42px;
  line-height: 42px;
  color: #333333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 210px;
}
.band-price {
  left: 23px;
  top: 72px;
  font-size: 24px;
  height: 33px;
  line-height: 33px;
  color: #999999;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 210px;
}
.new-name{
  font-size: 30px;
  height: 42px;
  line-height: 42px;
  color: #333333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 210px;
  margin: 0 auto;
  text-align: left;
}
.new-brief{
  font-size: 24px;
  height: 33px;
  line-height: 33px;
  color: #999999;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 210px;
  margin: 0 auto;
}

.newlist {
  display: flex;
  justify-content:space-between;
  width: 1119px; 
}
.hotgoods .newlist{
  width: 1399px; 
}
.price{
  font-size: 24px;
  height: 33px;
  line-height: 33px;
  color: #9E4242;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 210px;
  margin: 0 auto;
  text-align: left;
}
.new-container{
  overflow: scroll;
}
.newlist .newitem {
  width: 279px;
  border-right: 1px solid #979797;
  margin: 20px 0;
}
.newitem:last-child{
  border-right: 0;
}
.newitem img{
  width: 200px;
  height: 200px;
  
}
//好物推荐样式
.topic-container{
  .topiclist{
    display: flex;
    overflow: scroll;
    .topicitem{
      margin-left:20px;
      
      .topic-img{
        width: 556px;
        height: 309px;
      }
      .topic-title{
        font-size: 30px;
        color: #333333;
        letter-spacing: 0;
        font-weight: 500;
        text-align: left;
        height: 42px;
        line-height: 42px;
        margin-top: 21px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        span{
          float: right;
          font-size: 24px;
          color: #9E4242;
          letter-spacing: 0;
          font-weight: 400;
        }
      }
      .topic-subtitle{
        font-size: 24px;
        color: #999999;
        letter-spacing: 0;
        font-weight: 400;
        height: 33px;
        line-height: 33px;
        text-align: left;
        margin-top: 12px;
        margin-bottom: 12px;
        width: 216px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      
    }
    .topicitem:last-child{
      margin-right:20px;
    }
  }

}
//分类 样式
.category{
  .cate-content{
    .cate-item{
      
    }
  }
}
//分类图标
.icon-img{
  width: 69px;
  height: 69px;
}
//分类标题
.cate-name{
  font-size: 26px;
  color: #666666;
  letter-spacing: 0;
  font-weight: 400;
  margin-top: 16px;
}
</style>